import echarts from 'echarts'
import cytoscape from 'cytoscape';
import $ from "jquery";
import Config from "../config/index";
import Data from "../data/index";
import cxtmenu from 'cytoscape-cxtmenu'; 
 
const portrait = {
  $echarts:echarts,
  $cytoscape:cytoscape,
  drawCytoscape() { 
  let cy = this.$cytoscape({
      container: document.getElementById("cytoscape"),
      layout: {
        name: "breadthfirst",
        directed: true,
        padding: 10
      },
      boxSelectionEnabled: false,
      autounselectify: true,
      style: this.$cytoscape
        .stylesheet()
        .selector("node")
        .css({
          height: 80,
          width: 80,
          "background-fit": "cover",
          "border-color": "#000",
          "border-width": 3,
          "border-opacity": 0.5
        })
        .selector(".eating")
        .css({
          "border-color": "red"
        })
        .selector(".eater")
        .css({
          "border-width": 9
        })
        .selector("edge")
        .css({
          "curve-style": "bezier",
          width: 6,
          "target-arrow-shape": "triangle",
          "line-color": "#ffaaaa",
          "target-arrow-color": "#ffaaaa"
        })
        .selector("#bird")
        .css({
          "background-image":
            "https://live.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg"
        })
        .selector("#cat")
        .css({
          "background-image":
            "https://live.staticflickr.com/1261/1413379559_412a540d29_b.jpg"
        })
        .selector("#ladybug")
        .css({
          "background-image":
            "https://live.staticflickr.com/3063/2751740612_af11fb090b_b.jpg"
        })
        .selector("#aphid")
        .css({
          "background-image":
            "https://live.staticflickr.com/8316/8003798443_32d01257c8_b.jpg"
        })
        .selector("#rose")
        .css({
          "background-image":
            "https://live.staticflickr.com/5109/5817854163_eaccd688f5_b.jpg"
        })
        .selector("#grasshopper")
        .css({
          "background-image":
            "https://live.staticflickr.com/6098/6224655456_f4c3c98589_b.jpg"
        })
        .selector("#plant")
        .css({
          "background-image":
            "https://live.staticflickr.com/3866/14420309584_78bf471658_b.jpg"
        })
        .selector("#wheat")
        .css({
          "background-image":
            "https://live.staticflickr.com/2660/3715569167_7e978e8319_b.jpg"
        }),
      elements: {
        nodes: [
          { data: { id: "cat" } },
          { data: { id: "bird" } },
          { data: { id: "ladybug" } },
          { data: { id: "aphid" } },
          { data: { id: "rose" } },
          { data: { id: "grasshopper" } },
          { data: { id: "plant" } },
          { data: { id: "wheat" } }
        ],
        edges: [
          { data: { source: "cat", target: "bird" } },
          { data: { source: "bird", target: "ladybug" } },
          { data: { source: "bird", target: "grasshopper" } },
          { data: { source: "grasshopper", target: "plant" } },
          { data: { source: "grasshopper", target: "wheat" } },
          { data: { source: "ladybug", target: "aphid" } },
          { data: { source: "aphid", target: "rose" } }
        ]
      }
    });
    cy.nodes().on("click", evt => {
      console.log(evt);
    });
    cy.edges().on("click", evt => {
      console.log(evt);
    });
    cy.cxtmenu({
      selector: 'node, edge',

      commands: [
        {
          content: '<span class="fa fa-flash fa-2x"></span>',
          select: function(ele){
            console.log( ele.id() );
          }
        },

        {
          content: '<span class="fa fa-star fa-2x"></span>',
          select: function(ele){
            console.log( ele.data('name') );
          },
          enabled: false
        },

        {
          content: 'Text',
          select: function(ele){
            console.log( ele.position() );
          }
        }
      ]
    });
 

    var png64 = cy.png();
    document.querySelector("#png-eg").setAttribute("src", png64);
     return cy;
  },
    drawC1() {
        myChartC1 = this.$echarts.init(
          document.getElementById("c1"),
          Config.echartsTheme
        );
        let options = {
          grid: {
            top: 40,
            bottom: 10
          },
          legend: {
            data: ["CPU", "内存", "CPU2", "内存2"],
            itemHeight: 5,
            itemWidth: 5
          },
          xAxis: {
            data: ["CPU", "内存", "CPU", "内存"],
            show: true,
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          series: [
            {
              name: "CPU",
              type: "bar",
              barWidth: 1,
              data: [{ value: 0 }]
            },
            {
              name: "内存",
              type: "bar",
              barWidth: 1,
              data: [{ value: 0 }]
            },
  
            {
              name: "CPU2",
              type: "bar",
              barWidth: 1,
              data: [{ value: 0 }]
            },
            {
              name: "内存2",
              type: "bar",
              barWidth: 20,
              data: [
                {
                  value: 5,
                  itemStyle: {
                    color: "#06BBA4"
                  }
                },
                {
                  value: 5,
                  itemStyle: {
                    color: "rgba(248,154,0,1)"
                  }
                },
                {
                  value: 5,
                  itemStyle: {
                    color: "rgba(225,104,77,1)"
                  }
                },
                {
                  value: 5,
                  itemStyle: {
                    color: "rgba(91,150,237,1)"
                  }
                }
              ]
            }
          ]
        };
        myChartC1.setOption(options);
        console.log(myChartC1);
      },
      drawC2() {
        myChartC2 = this.$echarts.init(
          document.getElementById("c2"),
          Config.echartsTheme
        );
  
        let options = {
          grid: {
            top: 40,
            bottom: 20,
            right: 0
          },
          legend: {
            data: [
              {
                name: "CPU",
                icon: "roundRect"
              },
              {
                name: "内存",
                icon: "roundRect"
              }
            ],
            itemWidth: 5,
            itemHeight: 5
          },
          xAxis: {
            boundaryGap: false,
            data: ["23:00", "00:00", "01:00", "02:00", "03:00", "04:00"],
            show: true,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#E2E2E2"
              }
            },
            splitLine: {
              lineStyle: {
                type: "dotted"
              }
            }
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          color: ["#06BBA4", "rgba(248,154,0,1)"],
          series: [
            {
              name: "CPU",
              type: "line",
              barWidth: 1,
              data: [25, 10, 23, 10, 15, 15, 25, 10],
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#06BBA4" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)" // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            {
              name: "内存",
              type: "line",
              barWidth: 1,
              data: [10, 15, 25, 10, 23, 15, 25, 10],
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(248,154,0,1)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)" // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          ]
        };
        myChartC2.setOption(options);
      },
      drawC3() {
        myChartC3 = this.$echarts.init(
          document.getElementById("c3"),
          Config.echartsTheme
        );
  
        let options = {
          legend: {
            orient: "vertical",
            right: 60,
            top: 40,
            data: [
              {
                name: "基本工资",
                icon: "roundRect"
              },
              {
                name: "各种津贴",
                icon: "roundRect"
              },
              {
                name: "加班工资",
                icon: "roundRect"
              },
              {
                name: "岗位工资",
                icon: "roundRect"
              }
            ],
            itemWidth: 5,
            itemHeight: 5
          },
          color: [
            "#06bba4",
            "rgba(248,154,0,1)",
            "rgba(91,150,237,1)",
            "rgba(225,104,77,1)"
          ],
          series: [
            {
              name: "CPU",
              type: "pie",
              radius: ["50%", "75%"],
              center: ["30%", "60%"],
              data: [
                { value: 335, name: "基本工资" },
                { value: 310, name: "各种津贴" },
                { value: 234, name: "加班工资" },
                { value: 135, name: "岗位工资" }
              ]
            }
          ]
        };
        myChartC3.setOption(options);
      },
      drawC4() {
        let myChart = this.$echarts.init(
          document.getElementById("c4"),
          Config.echartsTheme
        );
  
        let options = {
          grid: {
            top: 40,
            bottom: 20,
            right: 20,
            left: 40
          },
          legend: {
            data: [
              {
                name: "CPU",
                icon: "roundRect"
              },
              {
                name: "内存",
                icon: "roundRect"
              }
            ],
            itemWidth: 5,
            itemHeight: 5
          },
          xAxis: {
            boundaryGap: false,
            data: ["23:00", "00:00", "01:00", "02:00", "03:00", "04:00"],
            show: true,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#E2E2E2"
              }
            },
            splitLine: {
              lineStyle: {
                type: "dotted"
              }
            }
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          color: ["#06BBA4", "rgba(248,154,0,1)"],
          series: [
            {
              name: "CPU",
              type: "line",
              barWidth: 1,
              data: [25, 10, 23, 10, 15, 15, 25, 10],
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#06BBA4" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)" // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            {
              name: "内存",
              type: "line",
              barWidth: 1,
              data: [10, 15, 25, 10, 23, 15, 25, 10],
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(248,154,0,1)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)" // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          ]
        };
        myChart.setOption(options);
      },
      drawC5() {
        let myChart = this.$echarts.init(
          document.getElementById("c5"),
          Config.echartsTheme
        );
        let seriesData = [];
        for (var i = 0; i < 12; i++) {
          seriesData.push({
            type: "bar",
            barWidth: 4,
            data: [100, 200, 100, 200, 100, 200, 100, 200, 100]
          });
        }
        let options = {
          grid: {
            top: 10,
            bottom: 40,
            left: 40,
            right: 40
          },
          color: "#E1684D",
          xAxis: {
            data: [
              "10:00",
              "11:00",
              "12:00",
              "13:00",
              "14:00",
              "15:00",
              "16:00",
              "17:00",
              "18:00"
            ],
            show: true,
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          series: seriesData
        };
        myChart.setOption(options);
      },
      drawC6() {
        let myChart = this.$echarts.init(
          document.getElementById("c6"),
          Config.echartsTheme
        );
        let options = {
          grid: {
            top: 10,
            bottom: 40,
            right: 20,
            left: 40
          },
          xAxis: {
            boundaryGap: false,
            scale: true,
            // data: ["23:00", "00:00", "01:00", "02:00", "03:00", "04:00","05:00","06:00","07:00","08:00","09:00","10:00"],
            show: true,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#E2E2E2"
              }
            },
            splitLine: {
              lineStyle: {
                type: "dotted"
              }
            }
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          color: ["#06BBA4", "rgba(248,154,0,1)"],
          series: [
            {
              type: "scatter",
              symbolSize: 8,
              data: Data.portraitC3[0]
            },
            {
              type: "scatter",
              symbolSize: 8,
              data: Data.portraitC3[1]
            }
          ]
        };
        myChart.setOption(options);
      },
      drawC7() {
        let myChart = this.$echarts.init(
          document.getElementById("c7"),
          Config.echartsTheme
        );
  
        let options = {
          grid: {
            top: 40,
            bottom: 30,
            right: 20,
            left: 20
          },
          legend: {
            data: [
              {
                name: "子网名称01",
                icon: "roundRect"
              },
              {
                name: "子网名称02",
                icon: "roundRect"
              },
              {
                name: "子网名称03",
                icon: "roundRect"
              }
            ],
            itemWidth: 5,
            itemHeight: 5
          },
          xAxis: {
            boundaryGap: false,
            data: ["23:00", "00:00", "01:00", "02:00", "03:00", "04:00"],
            show: true,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#E2E2E2"
              }
            },
            splitLine: {
              lineStyle: {
                type: "dotted"
              }
            }
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          color: ["#00796A", "#F89A00",'#5B96ED'],
          series: [
            {
              name: "子网名称01",
              type: "line",
              barWidth: 1,
              data: [25, 10, 23, 10, 15, 15, 25, 10],
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00796A" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)" // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            {
              name: "子网名称02",
              type: "line",
              barWidth: 1,
              data: [10, 15, 25, 10, 23, 15, 25, 10],
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#F89A00" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)" // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            {
              name: "子网名称03",
              type: "line",
              barWidth: 1,
              data: [10, 15, 23, 15, 25, 10,25, 10],
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#5B96ED" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)" // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          ]
        };
        myChart.setOption(options);
      },
      drawC8() {
        ['c8','c9','c10','c11'].forEach(id=>{
          let myChart = this.$echarts.init(
            document.getElementById(id),
            Config.echartsTheme
          );
    
          let options = {
            grid: {
              top: 40,
              bottom: 20,
              right: 20,
              left: 40
            }, 
            xAxis: {
              boundaryGap: false,
              data: ["23:00", "00:00", "01:00", "02:00", "03:00", "04:00"],
              show: true,
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: "#E2E2E2"
                }
              },
              splitLine: {
                lineStyle: {
                  type: "dotted"
                }
              }
            },
            yAxis: {
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              }
            },
            color: ["#06BBA4", "rgba(248,154,0,1)"],
            series: [
              {
                name: "CPU",
                type: "line",
                barWidth: 1,
                data: [25, 10, 23, 10, 15, 15, 25, 10],
                areaStyle: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#06BBA4" // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(255,255,255,0)" // 100% 处的颜色
                      }
                    ]
                  }
                }
              },
              {
                name: "内存",
                type: "line",
                barWidth: 1,
                data: [10, 15, 25, 10, 23, 15, 25, 10],
                areaStyle: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(248,154,0,1)" // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(255,255,255,0)" // 100% 处的颜色
                      }
                    ]
                  }
                }
              }
            ]
          };
          myChart.setOption(options);
        });
        
      },
      drawC12() {
        let myChart = this.$echarts.init(
          document.getElementById('c12'),
          Config.echartsTheme
        );
          
        let options = {
          backgroundColor:'transparent',
          grid: {
            top: 40,
            bottom: 20,
            right: 20,
            left: 40
          }, 
          xAxis: {
            boundaryGap: false,
            data: ["23:00", "00:00", "01:00", "02:00", "03:00", "04:00"],
            show: true,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#E2E2E2"
              }
            },
            splitLine: {
              lineStyle: {
                type: "dotted"
              }
            }
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          color: ["#06BBA4", "rgba(248,154,0,1)"],
          series: [
            {
              name: "CPU",
              type: "line",
              barWidth: 1,
              data: [25, 10, 23, 10, 15, 15, 25, 10],
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#06BBA4" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)" // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            {
              name: "内存",
              type: "line",
              barWidth: 1,
              data: [10, 15, 25, 10, 23, 15, 25, 10],
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(248,154,0,1)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)" // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          ]
        };
        myChart.setOption(options);
      }
}
 
export default{
    portrait 
}